import React, { Component } from 'react';
import {
  Form,
  Input,
  Select,
  Radio,
  Space,
  DatePicker,
  Modal,
  Typography,
  InputNumber,
  message,
} from 'antd';
const { Text } = Typography;
const { Option } = Select;

export default class layerCofigProps extends Component {
  formRef = React.createRef<FormInstance>();
  setData = (res: any) => {
    this.formRef.current?.setFieldsValue({
      ...res,
    });
  };
  onOKFn = () => {
    this.formRef.current!.submit();
  };
  onFinish = (val: any) => {
    const { handleOk } = this.props;
    const { interval, timer, expireTime, validityPeriod, ackTimeout, maxRepeat } = val;
    // 复制对象
    const obj = {
      ...val,
      expireTime: expireTime ? expireTime.format('YYYY-MM-DD HH:mm:ss') : '',
      timer: timer.valueOf(),
    };
    if (obj.pushPeriod === 1) {
      Object.assign(obj, {
        timer: '',
        interval: 0,
      });
    }
    if (obj.pushPeriod === 2) {
      if (!timer) {
        message.error('请选择定时日期');
        return false;
      }
      Object.assign(obj, {
        // timer,
        interval: 0,
      });
    }
    if (obj.pushPeriod === 3) {
      if (!interval) {
        message.error('请输入间隔时间');
        return false;
      }
      Object.assign(obj, {
        timer: '',
        interval: parseInt(interval) || 0,
      });
    }
    if (validityPeriod === 2 && !expireTime) {
      message.error('请选择有效期时间');
      return false;
    }

    Object.assign(obj, {
      ackTimeout: parseInt(ackTimeout) || 0, //应答时长
      maxRepeat: parseInt(maxRepeat) || 0, //重发次数
    });

    handleOk(obj);
  };
  render() {
    const { handleCancel, isLayer } = this.props;

    return (
      <Modal
        title="配置消息属性"
        visible={isLayer}
        onOk={this.onOKFn}
        onCancel={handleCancel}
        width={650}
      >
        <Form
          ref={this.formRef}
          onFinish={this.onFinish}
          style={{ paddingLeft: '20px', paddingTop: '16px' }}
        >
          <Form.Item name="pushPeriod" label="推送周期">
            <Radio.Group style={{ fontSize: '14px' }}>
              <Space direction="vertical">
                <div>
                  <Radio value={1}>实时</Radio>
                </div>
                <Space>
                  <Radio value={2}>定时</Radio>
                  <Form.Item noStyle name="timer">
                    <DatePicker showTime format="YYYY-MM-DD HH:mm:ss" />
                  </Form.Item>
                  <Text type="secondary">说明：到设置的时间点推送一次</Text>
                </Space>
                <Space>
                  <Radio value={3}>间隔</Radio>
                  <Form.Item noStyle name="interval">
                    <InputNumber min={1} max={99999} ></InputNumber>
                  </Form.Item>
                  <Text>小时</Text>
                  <Text type="secondary">说明：每隔XX小时推送一次消息</Text>
                </Space>
                {/* <Space>
                  <Radio value={4}>特定时刻</Radio>
                  <Form.Item noStyle name="time3">
                    <Select style={{ width: 120 }}>
                      <Option value="jack">Jack</Option>
                      <Option value="lucy">Lucy</Option>
                      <Option value="Yiminghe">yiminghe</Option>
                    </Select>
                  </Form.Item>
                </Space> */}
              </Space>
            </Radio.Group>
          </Form.Item>
          <Form.Item label="推送频率">
            <Space>
              <Space>
                <Form.Item name="frequencyTimes" noStyle>
                  <InputNumber min={1} max={99999}></InputNumber>
                </Form.Item>
                <Text>次/</Text>
              </Space>
              <Space>
                <Form.Item name="frequencyDay" noStyle>
                  <InputNumber min={1} max={99999}></InputNumber>
                </Form.Item>
                <Text>天</Text>
              </Space>
            </Space>
          </Form.Item>
          <Form.Item label="应答时长">
            <Space>
              <Form.Item name="ackTimeout" noStyle>
                <InputNumber min={0} max={86400}></InputNumber>
              </Form.Item>
              <Text>秒（超时）</Text>
              <Text type="secondary">范围：0至86400秒，0表示不应答</Text>
            </Space>
          </Form.Item>
          <Form.Item label="重发次数">
            <Space>
              <Form.Item name="maxRepeat" noStyle>
                <InputNumber min={0} max={10}></InputNumber>
              </Form.Item>
              <Text>次</Text>
              <Text type="secondary">范围：0至10次，0表示不重发</Text>
            </Space>
          </Form.Item>
          <Form.Item label="驻留时长">
            <Space>
              <Form.Item name="lengthStay" noStyle>
                <InputNumber min={1} max={99999}></InputNumber>
              </Form.Item>
              <Text>天</Text>
            </Space>
          </Form.Item>
          <Form.Item label="短信签名">
            <Space>
              <Form.Item name="smsSignName" noStyle>
                <Input placeholder="如：【东风猛士】" style={{ width: '180px' }} maxLength={50} />
              </Form.Item>
              <Text type="secondary">发送短信时，可填写</Text>
            </Space>
          </Form.Item>
          <Form.Item name="validityPeriod" label="有效期">
            <Radio.Group>
              <div>
                <Radio value={1}>永久有效</Radio>
              </div>
              <div>
                <Radio value={2}>有效期至</Radio>
                <Form.Item noStyle name="expireTime">
                  <DatePicker format="YYYY-MM-DD" />
                </Form.Item>
              </div>
            </Radio.Group>
          </Form.Item>
          <Form.Item>
            <Text type="secondary">
              说明：消息属性为可配置项，只有配置了相关属性，该属性才会生效；默认无需配置
            </Text>
          </Form.Item>
        </Form>
      </Modal>
    );
  }
}
